<template>
	<div class="rocker-con">
		<svg id="gimm" xmlns="http://www.w3.org/2000/svg" :width="w" :height="h" viewBox="0 0 140.47 140.47">
			<circle id="bg" class="cls-1" cx="70" cy="70" r="70" />
			<g>
				<path
					d="M1737.05,386.4a70,70,0,1,1-37.65,91.556A69.991,69.991,0,0,1,1737.05,386.4Zm13.09,31.379a36,36,0,1,1-19.36,47.085A35.99,35.99,0,0,1,1750.14,417.776Z"
					transform="translate(-1693.97 -380.969)" class="cls-1"></path>
				<path id="gimm-right-t"
					d="M1797.22,437.139a35.861,35.861,0,0,0-19.53-19.434l12.93-31.445a69.771,69.771,0,0,1,37.98,37.787h0l-31.38,13.092h0Z"
					transform="translate(-1693.97 -380.969)" class="cls-2" @click="controlClick('UPPER_RIGHT')"></path>
				<path id="gimm-up"
					d="M1777.69,417.705a35.883,35.883,0,0,0-27.55.07L1737.05,386.4a69.768,69.768,0,0,1,53.57-.137Z"
					transform="translate(-1693.97 -380.969)" class="cls-2" @click="controlClick('UP')"></path>
				<path id="gimm-left-t"
					d="M1737.05,386.4h0l13.09,31.378h0a35.847,35.847,0,0,0-19.43,19.532l-31.45-12.931A69.776,69.776,0,0,1,1737.05,386.4Z"
					transform="translate(-1693.97 -380.969)" class="cls-2" @click="controlClick('UPPER_LEFT ')"></path>
				<path id="gimm-left"
					d="M1730.78,464.861h0l-31.38,13.092h0a69.765,69.765,0,0,1-.14-53.576l31.45,12.931A35.85,35.85,0,0,0,1730.78,464.861Z"
					transform="translate(-1693.97 -380.969)" class="cls-2" @click="controlClick('LEFT')"></path>
				<path id="gimm-right"
					d="M1797.22,437.139a35.85,35.85,0,0,1,.07,27.553l31.45,12.931a69.763,69.763,0,0,0-.14-53.575h0l-31.38,13.092h0Z"
					transform="translate(-1693.97 -380.969)" class="cls-2" @click="controlClick('RIGHT')"></path>
				<path id="gimm-right-b"
					d="M1797.29,464.692a35.852,35.852,0,0,1-19.43,19.533l13.09,31.378a69.776,69.776,0,0,0,37.79-37.98Z"
					transform="translate(-1693.97 -380.969)" class="cls-2" @click="controlClick('LOWER_RIGHT')"></path>
				<path id="gimm-bottom"
					d="M1790.95,515.6h0l-13.09-31.378h0a35.883,35.883,0,0,1-27.55.07l-12.93,31.445A69.768,69.768,0,0,0,1790.95,515.6Z"
					transform="translate(-1693.97 -380.969)" class="cls-2" @click="controlClick('DOWN')"></path>
				<path id="gimm-left-b"
					d="M1730.78,464.862h0l-31.38,13.092h0a69.764,69.764,0,0,0,37.98,37.787l12.93-31.445A35.863,35.863,0,0,1,1730.78,464.862Z"
					transform="translate(-1693.97 -380.969)" class="cls-2" @click="controlClick('LOWER_LEFT')"></path>
			</g>
			<g style="pointer-events: none;">
				<path id="s-top" d="M1770.84,402.426h-13.32l6.66-11.331Z" transform="translate(-1693.97 -380.969)"
					class="cls-4"></path>
				<path id="s-right-t" d="M1802.17,420.417l-7.33-9.5,12.38-1.968Z"
					transform="translate(-1693.97 -380.969)" class="cls-4"></path>
				<path id="s-right" d="M1812.81,457.707V444.389l11.33,6.659Z" transform="translate(-1693.97 -380.969)"
					class="cls-4"></path>
				<path id="s-right-b" d="M1802,479.371l-7.28,9.539,12.38,1.9Z" transform="translate(-1693.97 -380.969)"
					class="cls-4"></path>
				<path id="s-bottom" d="M1757.53,499.677h13.32l-6.66,11.331Z" transform="translate(-1693.97 -380.969)"
					class="cls-4"></path>
				<path id="s-left-b" d="M1725.44,479.848l7.33,9.5-12.37,1.968Z" transform="translate(-1693.97 -380.969)"
					class="cls-4"></path>
				<path id="s-left" d="M1716,444v14l-11-7Z" transform="translate(-1693.97 -380.969)" class="cls-4"></path>
				<path id="s-left-t" d="M1725.62,419.894l7.28-9.539-12.39-1.905Z"
					transform="translate(-1693.97 -380.969)" class="cls-4"></path>
			</g>
		</svg>
	</div>
</template>

<script>
	export default {
		props: {
			w: {
				type: Number,
				default: 140,
			},
			h: {
				type: Number,
				default: 140,
			},
		},
		data() {
			return {}
		},
		methods: {
			controlClick(val) {
				// 1-上，2.左上，3.右上，4.下，5.左下，6.右下，7.左，8.右，
				this.$emit('rockChange', val)
			},
		},
	}
</script>

<style lang="scss" scoped>
	.rocker-con {
		width: 100%;
		// height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;

		/* 控制整体背景色 */
		.cls-1 {
			fill: #082644;
			fill-opacity: 0;
		}

		/* 控制圆盘背景色 */
		.cls-2 {
			fill: #000;
			opacity: 0.15;
		}

		/* 填充规则 */
		.cls-2,
		.cls-4 {
			fill-rule: evenodd;
		}

		/* 箭头颜色 */
		.cls-4 {
			fill: #fff;
			opacity: 1;
		}

		#gimm-right-t:hover,
		#gimm-right-b:hover,
		#gimm-right:hover,
		#gimm-left:hover,
		#gimm-left-t:hover,
		#gimm-left-b:hover,
		#gimm-up:hover,
		#gimm-bottom:hover {
			fill: var(--el-color-primary) !important;
			opacity: 1 !important;
			cursor: pointer;
		}
	}
</style>
